<script setup lang="ts">
import { computed } from 'vue'
import icon1 from './top-icon-1.png'
import icon2 from './top-icon-2.png'
import icon3 from './top-icon-3.png'

const props = defineProps<{
  type: 1 | 2 | 3
  title: string
  value: string | number
  unit: string
}>()

const icon = computed(() => {
  switch (props.type) {
    case 1:
      return icon1
    case 2:
      return icon2
    case 3:
      return icon3
    default:
      return icon1
  }
})
</script>

<template>
  <div class="top-item min-w-50 flex items-center py-4 pl-5 pr-8">
    <div class="top-item-icon mr-2 h-12 w-12 flex items-center justify-center">
      <img :src="icon" class="h-10 w-10">
    </div>
    <div class="flex flex-auto flex-col">
      <div class="text-lg opacity-80 font-pmzd">
        {{ title }}
      </div>
      <div class="text-lg font-pmzd -mt-1">
        <span class="mr-2 text-[#18DEF5]">{{ value }}</span>
        <span class="opacity-80">{{ unit }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top-item {
  background: url('./top-item.png') no-repeat;
  background-size: 100% 100%;
  &-icon {
    background: url('./top-icon-bg.png') no-repeat;
  }
}
</style>
